<template>
  <div>
    <div class="box">
      <!-- 搜索 -->
      <div class="serch">
        <div class="header">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <div class="tb_box">
                <span class="tb_text">题目</span>
                <input
                  class="tb_input"
                  type="text"
                  v-model="serch_position_name"
                  placeholder="请输入"
                />
              </div>
            </el-form-item>
            <el-form-item>
              <div class="tb_box">
                <span class="tb_text">&nbsp;</span>
                <el-button type="primary" class="table_btn" @click="search">
                  <el-icon> <Search /> </el-icon>
                  搜索
                </el-button>
                <el-button class="table_btn" @click="reset">
                  <el-icon> <Refresh /> </el-icon>
                  重置
                </el-button>
                <el-button
                  type="success"
                  class="table_btn"
                  @click="openAddAnswer"
                >
                  <el-icon><Plus /></el-icon>
                  添加
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 表格 -->
      <div class="table">
        <el-table
          type="index"
          :data="tableData"
          :key="index"
          max-height="700px"
          style="width: 100% !important; overflow: hidden"
          stripe
          v-loading="Loading"
        >
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="text" label="题目" />
          <el-table-column prop="answers" label="选项">
            <template #default="{ row }">
              <el-tag
                type="primary"
                v-for="(item, index) in row.answers"
                :key="index"
                >{{ item.text }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="question_type" label="类型">
            <template #default="{ row }">
              <el-tag type="primary" v-if="row.question_type == 1">单选</el-tag>
              <el-tag type="success" v-if="row.question_type == 2">多选</el-tag>
              <el-tag type="warning" v-if="row.question_type == 3">判断</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" class="Operation" width="200px">
            <template #default="{ row }">
              <div class="but_Settings">
                <button @click="openDelest(row)" class="btn_delete">
                  <span>删除</span>
                </button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 新增弹窗 -->
      <el-dialog :title="title" v-model="dialogFormVisible" width="50%">
        <el-form
          :model="question.question"
          style="display: flex; flex-direction: column"
        >
          <el-form-item label="题目:">
            <el-input
              v-model="question.question.text"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="题目类型:">
            <el-select
              v-model="question.question.question_type"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="option in questionTypeOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="question.question.question_type == 3">
            <el-radio-group v-model="question.question.is_correct">
              <el-radio :label="true">正确</el-radio>
              <el-radio :label="false">错误</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-for="(answer, index) in question.question.answers"
            :key="index"
            :label="`选项${index + 1}:`"
            v-else
          >
            <el-input v-model="answer.text" autocomplete="off"></el-input>
            <el-radio-group v-model="answer.is_correct">
              <el-radio :label="true">正确</el-radio>
              <el-radio :label="false">错误</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="onsubmit()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 确认弹窗 -->
      <el-dialog
        v-model="dialogVisible"
        width="500"
        :before-close="handleClose"
        style="margin-top: 15%"
      >
        <span>{{ dialogTitle }}</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button
              type="primary"
              @click="dialogVisible = false"
              v-if="dialogTitle == '你确认要上传该文件吗？'"
            >
              确定
            </el-button>
            <el-button type="primary" @click="Delete" v-else> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import "../assets/componentStyles.css";
import {
  getAll, // 获取题目
  addAnswer, // 新增题目
  deleteAnswer, // 删除题目
} from "../api/answerManagement.js";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      Loading: false,
      tableData: [{}], // 表格数据
      serch_position_name: "", //搜索的题目名称
      originalData: null, // 筛选暂存数据
      title: "", //弹窗标题
      dialogFormVisible: false, // 新增弹窗控制变量
      dialogVisible: false, //确认弹窗控制变量

      page: 1, //页面
      page_size: 10, //当前页面条数
      total: 0, //总条数

      // 弹窗表单数据
      question: {
        question: {
          text: "",
          question_type: 1,
          answers: [
            {
              text: "",
              is_correct: true,
            },
            {
              text: "",
              is_correct: false,
            },
            {
              text: "",
              is_correct: false,
            },
            {
              text: "",
              is_correct: false,
            },
          ],
        },
      },
      // 题目类型选项
      questionTypeOptions: [
        {
          label: "单选",
          value: 1,
        },
        {
          label: "多选",
          value: 2,
        },
        {
          label: "判断",
          value: 3,
        },
      ],
      excelFile: null, //excel文件
      dialogTitle: "", //确认弹窗文字
      deleteID: 0, //删除ID
    };
  },
  created() {
    this.getList(this.page, this.page_size);
  },
  methods: {
    // 获取数据
    getList(page, page_size) {
      getAll({
        page: page,
        pageSize: page_size,
      })
        .then((res) => {
          this.tableData = res;
          this.total = res.count;
          this.currentPage = page;
          // 更新每页显示数量
          this.pageSize = page_size;
        })
        .catch((error) => {
          ElMessage.error(error);
        });
    },

    // 新增弹框
    openAddAnswer(row) {
      this.form = row;
      this.dialogFormVisible = true;
      this.title = "新增题目";
    },

    // 重置
    reset() {
      this.serch_position_name = "";
      this.question = {
        question: {
          text: "",
          question_type: 1,
          answers: [
            {
              text: "",
              is_correct: true,
            },
            {
              text: "",
              is_correct: false,
            },
            {
              text: "",
              is_correct: false,
            },
            {
              text: "",
              is_correct: false,
            },
          ],
        },
      };
      this.page_size = 10;
      this.dialogFormVisible = false;
      this.getList(this.currentPage, this.page_size);
    },

    // 提交表单
    onsubmit() {
      try {
        if (this.question.question.question_type == 3) {
          if (this.question.question.is_correct) {
            this.question.question.answers = [
              {
                text: "正确",
                is_correct: true,
              },
              {
                text: "错误",
                is_correct: false,
              },
            ];
          } else {
            this.question.question.answers = [
              {
                text: "正确",
                is_correct: false,
              },
              {
                text: "错误",
                is_correct: true,
              },
            ];
          }

          delete this.question.question.is_correct;
          console.log(this.question);
        }

        addAnswer(this.question)
          .then((res) => {
            this.getList(this.page, this.page_size);
            this.dialogFormVisible = false;
            ElMessage({
              message: "新增成功",
              type: "success",
            });
          })
          .catch((error) => {
            ElMessage({
              message: error,
              type: "error",
            });
          });
      } catch (error) {}
    },

    // 打开删除弹窗
    openDelest(row) {
      this.dialogTitle = "您确定要删除" + row.text + "这条数据吗？";
      this.dialogVisible = true;
      this.deleteID = row.id;
    },

    // 删除单行数据
    Delete() {
      deleteAnswer(this.deleteID)
        .then((res) => {
          this.dialogVisible = false;
          this.getList(this.page, this.page_size);
          ElMessage({
            message: "成功删除题目：" + row.text,
            type: "success",
          });
        })
        .catch((error) => {});
    },

    // 搜索方法
    search() {
      if (!this.originalData) {
        this.originalData = [...this.tableData];
      }
      if (this.serch_position_name == "") {
        this.tableData = this.originalData;
      } else {
        this.tableData = this.originalData.filter((item) => {
          let state = true;
          let itemValue = item.text;
          if (!itemValue.includes(this.serch_position_name)) {
            this.state = false;
            return;
          }
          return state;
        });
        this.serch_position_name = "";
      }
    },

    // 当前页条数改变时调用
    handleSizeChange(val) {
      this.currentPage = 1;
      this.page_size = val;
      this.getList(this.currentPage, this.page_size);
    },

    // 当前页码改变时调用
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(this.currentPage, this.page_size);
    },
  },
};
</script>


<style lang="less" scoped>
.el-form-item {
  margin: 10px;
}
/deep/ .el-form-item__label {
  width: 176px;
  min-width: 76px;
  font-size: 16px;
  justify-content: flex-start;
}
.table {
  margin-top: 40px;
}
.el-form {
  display: flex;
}
/deep/.el-form-item__content {
  align-content: flex-start;
}
.upload {
  width: 100px;
}
/deep/.el-upload-list {
  margin: 0;
}
/deep/.el-table td.el-table__cell div {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
/deep/.btn_Modification,
.btn_delete,
.btn_Binding {
  margin: 0 10px;
}

// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color) !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader {
  margin-right: auto;
}
/deep/ .el-upload {
  border: 1px dashed var(--el-border-color) !important;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>>
